<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="kaiji">
    <meta name="keyword" content="博客, 文章, 评论列表， 列表">
    <title>个人文章评论列表</title>
	<#include "admin/common.ftl" />
	
	<style type="text/css">
		.form-control {color: black;}
	</style>
  </head>

  <body>

  <section id="container" class="">
      <!--header start-->
      <#include "admin/header.ftl" />
      <!--header end-->
      <!--sidebar start-->
      <#include "admin/sidebar.ftl" />
      <!--sidebar end-->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
              <!-- page start-->
              <div class="row">
                  <div class="col-lg-12">
                      <section class="panel">
                          <header class="panel-heading">个人文章信息列表</header>
                       </section>
                       <section class="panel">
                          <table class="table table-striped border-top" id="commentTable">
                          <thead>
                          <tr>
                              <th style="width:8px;"><input type="checkbox" class="group-checkable all" data-set="#commentTable .checkboxes" /></th>
                              <th class="dt-body-center">序号</th>
                              <th>文章标题</th>
                              <th>评论内容</th>
                              <th>评论时间</th>
                              <th>评论人</th>
                              <th>操作</th>
                          </tr>
                          </thead>
                          
                          </table>
                      </section>
                  </div>
              </div>
              <!-- page end-->
	      </section>
      </section>

	<!-- edit modal start -->
	 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="editModal" class="modal fade">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                     <h4 class="modal-title">评论信息</h4>
                 </div>
                 <div class="modal-body">

                     <form role="form" class="form-horizontal" id="checkForm" action="${ctx}/admin/comment/check.html" method="post">
                     	<input type="hidden" name="commentId" />
                         <div class="form-group">
                             <label for="title" class="col-sm-2 control-label"></label>
                             <div class="col-sm-10">
                             <input type="text" class="form-control" name="title" placeholder="文章标题" required/>
                             </div>
                         </div>
                         <div class="form-group">
                         <label><input type="radio" name="deleteStatus">通过</label>
                         <label><input type="radio" name="deleteStatus">失败</label>
                         </div>
                         <div class="form-group">
                             <label for="failMsg" class="col-sm-2 control-label">备注</label>
                             <div class="col-sm-10">
                             <input type="text" class="form-control" name="failMsg" placeholder="备注" required/>
                             </div>
                         </div>
                         <div class="form-group">
                         	<div class="col-lg-offset-3 col-lg-4">
                         		<button type="submit" class="btn btn-default">保存</button>
                         		<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                         	</div>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
	<!-- end edit modal -->
   <#include "admin/common_js.ftl" />
   <script type="text/javascript" src="${ctx}/assets/data-tables/jquery.dataTables.js"></script>
   <script type="text/javascript" src="${ctx}/assets/data-tables/DT_bootstrap.js"></script>
   <script src="${ctx}/js/dynamic-table.js"></script>
   <script src="${ctx}/js/moment.js"></script>
   <script type="text/javascript">
   	$(function() {
   		var $dataTable = $("#commentTable").DataTable({
	    	ajax: {   
                url: "${ctx}/admin/comment/index.html"
            },
            columns: [
                {"data": "commentId"},
                {"data": null},
                {"data": "articleEntity.title"},
                {"data": "content"},
                {
	        		"data": "createDate",
	        		"render": function(data, type, full, meta) {
	        			 return  moment(data).format("YYYY-MM-DD HH:mm:ss");
	        		}
	            },		  
                {"data": "authorEntity.realName"},
                {"data": null}
            ],
            "columnDefs": [
            	{
			        "targets": 0,
			        "className": 'dt-body-center',
			        "render": function (data, type, full, meta){
			            return '<input type="checkbox" name="ids" value="' + $('<div/>').text(data).html() + '">';
			        }
		        },
             	{
                 "targets": -1,
                 "defaultContent": "<button class='btn btn-primary btn-xs checkBtn'><i class='icon-pencil'>审核</i></button>"
             	}
		    ],
            fnDrawCallback: function(){
                var api = this.api();
		            　　 var startIndex= api.context[0]._iDisplayStart;
		            　　 api.column(1).nodes().each(function(cell, i) {
            　　　　    		cell.innerHTML = startIndex + i + 1;
            　　			 });
           	 	$(this).find('input[type=checkbox]').removeAttr('checked');  
            }
	      	
	    });
		
		// 进入审核页面
	    $("#commentTable tbody").on("click", ".checkBtn", function () {
			var data = $dataTable.row($(this).parents("tr")).data();
	    	$("#checkForm").find("input[name='commentId']").val(data.commentId);
	    	$("#checkForm").find("input[name='title']").val(data.articleEntity.title);
	    	$("#checkForm").find("input[name='content']").val(data.content);
	    	$("#checkForm").find("input[name='failMsg']").val(data.failMsg);
	    	$("#editForm").attr("action", "${ctx}/admin/comment/check.html");
	    	$("#editModal").modal("show");
		});
   	});
	</script>
  </body>
</html>